<template>
  <div>
    <div style="height:20px;"></div>
    <!-- 懒加载原因不能用lazeloadType组件在同一页面展示 -->
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础信息" name="first">
        <FormPanel ref="from1" :list="formList1" @formChange="changeHandle1" :isSubmitBtn="false" :collapse="false" labelWidth="110" />
        <BreakSpace label="操作记录" />
        <FilterTable ref="table" :columns="columns1" :dataSource="tableLists" :isSelectColumn="false" height="auto" :onColumnsChange="columns => (this.columns1 = columns)"> </FilterTable>
      </el-tab-pane>
      <el-tab-pane label="车辆信息" name="fourth">
        <carChildren :data="json"></carChildren>
      </el-tab-pane>
      <el-tab-pane label="发票行驶证附件" name="third">
        <FormPanel ref="from2" :list="formList2" @formChange="changeHandle2" :isSubmitBtn="false" :collapse="false" labelWidth="110" />
      </el-tab-pane>
      <el-tab-pane label="其他附件" name="second">
        <FormPanel ref="from3" :list="formList3" @formChange="changeHandle3" :isSubmitBtn="false" :collapse="false" labelWidth="110" />
      </el-tab-pane>
    </el-tabs>
    <div style="height:47px;"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer(1)">关 闭</el-button>
    </div>
  </div>
</template>
<script>
import { state, mutations } from './store';
import { getDetail, updateSubsidyApply, getflowList } from '@/api/dealerSale/subsidy/subsidyUpload/index.js';
import carChildren from './emit/carChildren';
import { dictionary } from '@/utils/dictMixin';
import { getDownloadUrl } from '@/api/omSale/subsidy/subsidyInquiry/index.js';

export default {
  data() {
    this.saveData1 = null;
    this.saveData2 = null;
    this.saveData3 = null;
    return {
      json: {},
      activeName: 'first',
      iscommit: 0,
      formList1: this.createdFrom1(),
      formList2: this.createdFrom2(),
      formList3: this.createdFrom3(),
      fetchApi: () => { },
      fetchParams: {},
      columns1: this.createdTables(),
      isopen: true,
      tableLists: []
    };
  },
  mixins: [dictionary],
  components: {
    carChildren
  },
  props: ['rowData'],
  created() {
    this.getDetail(this.rowData);
  },
  methods: {
    getFileName(res) {
      let patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*');
      let contentDisposition = decodeURI(res.headers['content-disposition']);
      let result = patt.exec(contentDisposition);
      let fileName = result[1];
      fileName = fileName.replace(/\"/g, '');
      return fileName;
    },
    async queryDownloadUrl(id) {
      const res = await getDownloadUrl(id);
      const blob = new Blob([res.data], {
        type: res.data.type
      });
      const fileName = this.getFileName(res);
      const url = URL.createObjectURL(blob);
      console.log(url, fileName, '你是啥1？');
      return [fileName, url];
    },
    async getDetail(data) {
      let res = await getDetail({ id: data.id });
      this.json = res.data;
      this.getflowList(data);
      this.initData(res.data);
    },

    initData(data) {
      for (let i in data) {
        this.formList1.map(x => {
          if (x.fieldName == 'customerType') {
            x.initialValue = data.customerType ? Number(data.customerType) : '';
          } else if (x.fieldName == 'isSecondSales') {
            x.initialValue = data.isSecondSales ? `${data.isSecondSales}` : '';
          } else if (i == x.fieldName) {
            x.initialValue = data[i];
          }
        });
      }
      if (data.applyStatus == 60191004) {
        this.formList1.find(x => x.fieldName == 'checkDesc').rules = [{ required: true, message: '请输入', trigger: 'blur' }];
      } else {
        this.formList1.find(x => x.fieldName == 'checkDesc').rules = [{ required: false }];
      }

      // 处理附件文件名、URL；
      if (data.enclosures && data.enclosures.length > 0) {
        let invocieArr = [];
        let drivingArr = [];
        let otherArr = [];
        data.enclosures.map(y => {
          if (y.enclosureType == 'invoiceAddress') {
            this.queryDownloadUrl(y.enclosureId).then(info => {
              invocieArr.push({ name: info[0], url: info[1] });
            });
          } else if (y.enclosureType == 'drivingAddress') {
            this.queryDownloadUrl(y.enclosureId).then(info => {
              drivingArr.push({ name: info[0], url: info[1] });
            });
          } else if (y.enclosureType == 'otherAddress') {
            this.queryDownloadUrl(y.enclosureId).then(info => {
              otherArr.push({ name: info[0], url: info[1] });
            });
          }
        });
        this.formList2.find(x => x.fieldName == 'invoiceAddress').initialValue = invocieArr;
        this.formList2.find(x => x.fieldName == 'drivingAddress').initialValue = drivingArr;
        this.formList3.find(x => x.fieldName == 'otherAddress').initialValue = otherArr;
      }
      // this.formList2.map(x => {
      //     if(x.fieldName=='invoiceAddress'){
      //       if(data.enclosures){
      //         let arr=[]
      //         data.enclosures.map(y=>{
      //           if(y.enclosureType=='invoiceAddress'){
      //             arr.push({name:y.enclosureName,url:y.enclosureUrl})
      //           }
      //         })
      //         x.initialValue=arr;
      //       }
      //     }
      //     if(x.fieldName=='drivingAddress'){
      //       if(data.enclosures){
      //         let arr=[]
      //         data.enclosures.map(y=>{
      //           if(y.enclosureType=='drivingAddress'){
      //             arr.push({name:y.enclosureName,url:y.enclosureUrl})
      //           }
      //         })
      //         x.initialValue=arr;
      //       }
      //     }
      //   });

      // this.formList3.map(x => {
      //   if (x.fieldName == 'otherAddress') {
      //     if (data.enclosures) {
      //       let arr = [];
      //       data.enclosures.map(y => {
      //         if (y.enclosureType == 'otherAddress') {
      //           arr.push({ name: y.enclosureName, url: y.enclosureUrl });
      //         }
      //       });
      //       x.initialValue = arr;
      //     }
      //   }
      // });

      this.formList1.find(x => x.fieldName == 'plateProvince').itemList = this.createRegionsList();
      this.formList1.find(x => x.fieldName == 'plateCity').itemList = this.createcityList(data.plateProvince);
      this.formList1.find(x => x.fieldName == 'provinceId').itemList = this.createRegionsList();
      this.formList1.find(x => x.fieldName == 'cityId').itemList = this.createcityList(data.provinceId);
      this.formList1.find(x => x.fieldName == 'districtId').itemList = this.district(data.cityId);
    },
    createdFrom1() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '行驶证信息'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请选择', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '公告号',
          fieldName: 'announceNo',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '客户类型',
          fieldName: 'customerType',
          placeholder: '请选择',
          itemList: this.createDictList('1523'),
          disabled: true,
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '客户姓名',
          fieldName: 'customerName',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请选择', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'plateNumber',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '行驶证号',
          fieldName: 'drivingNo',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '上牌省份',
          fieldName: 'plateProvince',
          placeholder: '请选择',
          itemList: this.createRegionsList(),
          disabled: true,
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '上牌城市',
          fieldName: 'plateCity',
          placeholder: '请选择',
          itemList: [],
          disabled: true,
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'DATE',
          label: '行驶证注册日期',
          fieldName: 'drivingRegisteDate',
          placeholder: '请选择',
          dateType: 'exactdate',
          disabled: true,
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'TEXT_AREA',
          label: '备注',
          fieldName: 'remark',
          placeholder: '请输入',
          selfCols: 2,
          disabled: true
        },
        {
          type: 'SELECT',
          label: '车辆性质',
          fieldName: 'vehicleType',
          placeholder: '请选择',
          itemList: this.createDictList('4103'),
          disabled: true
        },
        {
          type: 'BREAK_SPACE',
          label: '发票信息'
        },
        {
          type: 'DATE',
          label: '开票日期',
          fieldName: 'invoiceDate',
          placeholder: '请选择',
          dateType: 'exactdate',
          disabled: true,
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '发票号码',
          fieldName: 'invoiceNo',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '证件类型',
          fieldName: 'cardType',
          placeholder: '请选择',
          disabled: true,
          itemList: this.createDictList('1508'),
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '证件号码',
          fieldName: 'cardNo',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '开票价格',
          fieldName: 'invoiceAmount',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '发票代码',
          fieldName: 'invoiceCode',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'CHECKBOX',
          label: '车价是否含国补',
          fieldName: 'includeLocalSubsidy',
          placeholder: '请选择',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '国补金额',
          fieldName: 'localSubsidyAmount',
          placeholder: '请输入',
          offsetRightCols: 1,
          disabled: true
        },
        {
          type: 'CHECKBOX',
          label: '车价是否含地补',
          fieldName: 'includeNationalSubsidy',
          placeholder: '请选择',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '地补金额',
          fieldName: 'nationalSubsidyAmount',
          placeholder: '请输入',
          offsetRightCols: 1,
          disabled: true
        },
        {
          type: 'BREAK_SPACE',
          label: '客户信息'
        },
        {
          type: 'INPUT',
          label: '联系人',
          fieldName: 'linkMan',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '手机号',
          fieldName: 'linkPhone',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '省份',
          fieldName: 'provinceId',
          placeholder: '请选择',
          disabled: true,
          itemList: this.createRegionsList(),
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '城市',
          fieldName: 'cityId',
          placeholder: '请选择',
          itemList: [],
          disabled: true,
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '县区',
          fieldName: 'districtId',
          placeholder: '请选择',
          itemList: [],
          disabled: true,
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '邮编',
          fieldName: 'zipCode',
          placeholder: '请输入',
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'TEXT_AREA',
          label: '详细地址',
          fieldName: 'linkAddress',
          placeholder: '请输入',
          selfCols: 2,
          disabled: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '审批驳回次数',
          fieldName: 'rejectTimes',
          disabled: true,
          placeholder: '请输入'
        },
        {
          type: 'CHECKBOX',
          label: '是否二网销售',
          fieldName: 'isSecondSales',
          placeholder: '请选择',
          disabled: true,
          itemList: this.createDictList('1004')
        },
        {
          type: 'BREAK_SPACE',
          label: '审批信息'
        },
        {
          type: 'TEXT_AREA',
          label: '审批意见',
          fieldName: 'checkDesc',
          placeholder: '请输入',
          selfCols: 3,
          disabled: true,
          rules: [{ required: false }]
        }
      ];
    },
    createdFrom2() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '发票行驶证附件'
        },
        {
          type: 'UPLOAD_FILE',
          label: '发票附件',
          fieldName: 'invoiceAddress',
          placeholder: '请选择',
          selfCols: 2,
          initialValue: [],
          disabled: true,
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1000,
            tipText: '最多上传1000个附件',
            fileTypes: ['jpg'],
            max: 1024,
            fileSize: 1
          },
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'UPLOAD_FILE',
          label: '行驶证附件',
          fieldName: 'drivingAddress',
          placeholder: '请选择',
          selfCols: 2,
          initialValue: [],
          disabled: true,
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1000,
            tipText: '最多上传1000个附件',
            fileTypes: ['jpg'],
            max: 1024,
            fileSize: 1
          },
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        }
      ];
    },
    createdFrom3() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '网约车仅需上传《网络预约出租汽车运输证》，其余车辆无需上传材料'
        },
        {
          type: 'UPLOAD_FILE',
          label: '其他附件',
          fieldName: 'otherAddress',
          placeholder: '请选择',
          selfCols: 2,
          initialValue: [],
          disabled: true,
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1000,
            tipText: '最多上传1个附件',
            fileTypes: ['jpg'],
            max: 1024,
            fileSize: 1
          }
        }
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '单据执行前状态',
          dataIndex: 'djzxqzt',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '单独执行后状态',
          dataIndex: 'ddzxhzt',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '操作人员',
          dataIndex: 'czry',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '操作时间',
          dataIndex: 'czsj',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '操作类型',
          dataIndex: 'czlx',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '审批意见',
          dataIndex: 'spyj',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    changeHandle1(val) {
      this.saveData1 = val;
    },
    changeHandle2(val) {
      this.saveData2 = val;
    },
    changeHandle3(val) {
      this.saveData3 = val;
    },
    async closeDrawer(type) {
      if (type == 1) {
        this.$emit('close');
      }
    },
    async getUser() {
      let res = await getDealerUser();
      let empList = res.data.map(x => ({ text: x.employeeName, value: x.userId }));
      this.columns1.find(item => item.dataIndex === 'updated_by').editItems = empList; //操作姓名
      this.columns1.find(item => item.dataIndex === 'updated_by').filterItems = empList;
    },
    async getflowList(data) {
      let res = await getflowList({ id: data.id });
      if (res.data && res.data.length > 0) {
        this.tableLists = res.data || [];
      }
    },
    createdTables() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作后状态',
          dataIndex: 'status',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('6019'),
          render: p => {
            return <span>{this.createDictText(p.row.status, '6019')}</span>;
          }
        },
        {
          title: '操作人员',
          dataIndex: 'createdBy',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '操作时间',
          dataIndex: 'createdAt',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '审核意见',
          dataIndex: 'remark',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    }
  }
};
</script>
